<template>
  <div class="beijing">
    <div class="el-card__body" style="min-height: 686px;">
      <div class="avue-crud avue-crud--card">
        <!-- 搜索 -->
        <div class="top" v-if="isSearchVisible">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="自提点名称">
              <el-input v-model="formInline.addrName" placeholder="请输入 自提点名称"
                style="width: 250px;font-size: 12px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sousuo" icon="el-icon-search" size="mini"
                style="margin-right:10px;">搜索</el-button>
              <el-button @click="qingchu" icon="el-icon-delete" size="mini">清除</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--内容  -->
        <div class="body">
          <div class="el-card__body1">
            <!--4个按钮 -->
            <div class="avue-crud__menu">
              <div class="avue-crud__left">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="xinzeng">新增</el-button>
                <el-button type="danger" :disabled="!xuanzhong.length" size="small" @click="piliang">批量删除</el-button>
              </div>
              <div class="avue-crud__right">
                <el-button icon="el-icon-refresh" circle size="small" @click="shuaxin"></el-button>
                <el-button icon="el-icon-search" circle size="small" @click="xianshi"></el-button>
              </div>

            </div>
            <!--  -->
            <span class="el-tag">
              <span>当前表格已选择<span class="xaing">{{ xuanzhong.length }}</span>项</span>
              <button @click="qingkong">清空</button>
            </span>
            <!-- 表格 -->
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;" border
              @selection-change="handleSelectionChange" :header-cell-style="{
                background: '#FAFAFA',
                color: '#1f2d3d',
                'border-color': '#dfe6ec',
                'text-align': 'center'
              }" :cell-style="{ 'text-align': 'center' }">
              <el-table-column type="selection" width="50">
              </el-table-column>
              <el-table-column prop="addrName" label="自提点名称" width="160">
                <!-- <template slot-scope="scope">{{ scope.row.addrName }}</template> -->
              </el-table-column>
              <el-table-column prop="mobile" label="手机号" width="158">
              </el-table-column>
              <el-table-column prop="province" label="省份" width="158">
              </el-table-column>
              <el-table-column prop="city" label="城市" width="158">
              </el-table-column>
              <el-table-column prop="area" label="区/县" width="158">
              </el-table-column>
              <el-table-column prop="addr" label="地址" show-overflow-tooltip width="158">
              </el-table-column>
              <el-table-column prop="name" label="操作">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" icon="el-icon-edit" @click="bianji(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" icon="el-icon-delete"
                    @click="shanchu(scope.row.addrId)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- 分页 -->
                  <pagination :total="total" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange">
            </pagination>
            <!-- 模态框 -->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
              <el-form :model="form" inline label-width="80px" :rules="rules" ref="form">
                <el-form-item label="名称" prop="addrName">
                  <el-input v-model="form.addrName" autocomplete="自提点名称" style="width:699px;"></el-input>
                </el-form-item>

                <el-form-item label="省份">
                  <el-select v-model="form.provinceId" placeholder="请选择" @change="shi">
                    <el-option v-for="item in provinceOptions" :key="item.areaName" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="form.cityId" placeholder="请选择" @change="qu">
                    <el-option v-for="item in cityOptions" :key="item.areaName" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="form.areaId" placeholder="请选择" @change="qu2">
                    <el-option v-for="item in areaOptions" :key="item.areaName" :label="item.label"
                      :value="item.value"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="地址" prop="addr">
                  <el-input v-model="form.addr" autocomplete="地址" style="width:699px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="form.mobile" autocomplete="手机号" style="width:699px;"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button @click="quxiao">取 消</el-button>
                <el-button type="primary" @click="queding" v-if="title == '新增'">确 定</el-button>
                <el-button type="primary" @click="baocun" v-if="title == '编辑'">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue';
import { title } from '@/settings';
export default {
  data() {
    return {
      // 搜索显示隐藏
      isSearchVisible: true,
      // 添加/编辑显示隐藏
      dialogFormVisible: false,
      // 表格
      tableData: [],
      // 搜索
      formInline: {
        addrName: '',
      },
      current: 1,
      size: 10,
      // 总条数
      total: 0,
      // 选中的数据
      xuanzhong: [],
      // 标题
      title: '',
      // 添加/编辑
      form: {
        addrName: '',
        addr: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        areaId: null,
        provinceId: null,
        cityId: null,
      },
      rules: {
        addrName: [
          { required: true, message: '自提点名称不能为空', trigger: 'blur' },
        ],
        addr: [
          { required: true, message: '地址不能为空', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {min:11, max:11, message: '手机号格式错误', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' },
        ],
        city: [
          { required: true, message: '城市不能为空', trigger: 'blur' },
        ],
        area: [
          { required: true, message: '区/县不能为空', trigger: 'blur' },
        ],
      },

      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],

    }
  },
  components: {
    Pagination
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 数据
    getList() {
      this.$axios
        .get("/api/shop/pickAddr/page", {
          params: {
            current: this.current,
            size: this.size,
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == "00000") {
            this.tableData = res.data.data.records;
            // console.log(this.tableData);
            // this.current = res.data.data.current;
            this.size = res.data.data.size;
            this.total = res.data.data.total;
            this.pages = res.data.data.pages;
          }
        });
    },
    // 分页开始
    handleSizeChange(val) {
      console.log(val, "接收");
      // 当我点击每页多少条的时候赋值并重新渲染页面
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(val, "接收");
      // 当我点击页码的时候将页码赋值给变量并重新渲染页面
      this.current = val;
      this.getList();
    },
    // 分页结束
    // 搜索
    sousuo() {
      this.$axios
        .get("/api/shop/pickAddr/page", {
          params: {
            current: this.current,
            size: this.size,
            t: new Date().getTime(),
            addrName: this.formInline.addrName,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == "00000") {
            this.tableData = res.data.data.records;
            console.log(this.tableData);
            // this.current = res.data.data.current;
            this.size = res.data.data.size;
            this.total = res.data.data.total;
            this.pages = res.data.data.pages;
          }
        });
    },
    // 清除搜索框内容
    qingchu() {
      this.formInline.addrName = '';
    },
    // 搜索显示隐藏按钮
    xianshi() {
      this.isSearchVisible = !this.isSearchVisible;
    },
    // 重置
    shuaxin() {
      this.getList();
      this.formInline.addrName = '';
    },
    // 选项框选中
    handleSelectionChange(val) {
      this.xuanzhong = val;
    },
    // 清空选项框
    qingkong() {
      this.$refs.multipleTable.clearSelection();
      this.xuanzhong = [];
    },
    // 删除
    shanchu(id) {
      // console.log(id);
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios
          .delete("/api/shop/pickAddr", {
            data: [id],
            headers: {
              Authorization: localStorage.getItem("token"),
            }
          })
          .then((res) => {
            if (res.data.code === "00000") {
              this.getList();
              this.$message({
                type: 'success',
                message: '操作成功'
              });
            }
          });
      }).catch(() => {
        console.log(111111);

      });
    },
    // 批量删除
    piliang() {
      console.log(this.xuanzhong);
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.xuanzhong.map((item) => item.addrId);
        console.log(ids);
        this.$axios
          .delete("/api/shop/pickAddr", {
            data: ids,
            headers: {
              Authorization: localStorage.getItem("token"),
            }
          })
          .then((res) => {
            if (res.data.code === "00000") {
              this.getList();
              this.$message({
                type: 'success',
                message: '操作成功'
              });
            }
          });
      }).catch(() => {
        console.log(111111);

      });
    },
    // 新增
    xinzeng() {
      this.dialogFormVisible = true;
      this.title = "新增";
      this.form = {
        addrId:"",
        addrName: '',
        addr: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        areaId: '',
        provinceId: '',
        cityId: '',
      };
      this.sheng();
    },
    // 省级选择
    sheng() {
      this.$axios
        .get("/api/admin/area/listByPid", {
          params: {
            t: new Date().getTime(),
            pid: 0,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code == "00000") {
            this.provinceOptions = res.data.data.map(item => ({
              label: item.areaName,
              value: item.areaId,
            }));
            // console.log( this.provinceOptions);
          }
        });
    },
    // 市级选择
    shi(value) {
      const a = this.provinceOptions.find(item => item.value === value);
      this.form.province = a ? a.label : '';
      // this.form.city = '';
      // this.form.area = '';
      // this.form.cityId = null;
      // this.form.areaId = null;
      this.cityOptions = [];
      this.areaOptions = [];
      this.$axios
        .get("/api/admin/area/listByPid", {
          params: {
            t: new Date().getTime(),
            pid: value,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == "00000") {
            this.cityOptions = res.data.data.map(item => ({
              label: item.areaName,
              value: item.areaId,
            }));
          }
        });
    },
    // 区级选择
    qu(value) {
      const b = this.cityOptions.find(item => item.value === value);
      this.form.city = b ? b.label : '';
      // this.form.area = '';
      // this.form.areaId = null;
      this.areaOptions = [];
      this.$axios
        .get("/api/admin/area/listByPid", {
          params: {
            t: new Date().getTime(),
            pid: value,
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == "00000") {
            this.areaOptions = res.data.data.map(item => ({
              label: item.areaName,
              value: item.areaId,
            }));
          }
        });
    },
    qu2(value) {
      const c = this.areaOptions.find(item => item.value === value);
      this.form.area = c ? c.label : '';
    },
    // 编辑
    bianji(row) {
      // console.log(row);
      this.dialogFormVisible = true;
      this.title = "编辑";
      this.form = {
        addrId: row.addrId,               
        addrName: row.addrName,
        addr: row.addr,
        mobile: row.mobile,
        province: row.province,
        city: row.city,
        area: row.area,
        provinceId: row.provinceId,
        cityId: row.cityId,
        areaId: row.areaId,
      };
      this.sheng();
      this.shi(this.form.provinceId);
      this.qu(this.form.cityId);
    },
    // 取消
    quxiao() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    // 确定
    queding() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData = {
            ...this.form,
            t:new Date().getTime(),
          };
          this.$axios
            .post("/api/shop/pickAddr",formData, {
              headers: {
                Authorization: localStorage.getItem("token"),
              },
            })
            .then((res) => {
              if (res.data.code === "00000") {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.dialogFormVisible = false;
                this.getList();
              }
            })
            .catch((err) => {

            });
        }
      });
    },
    // 保存
    baocun() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const formData = {
            ...this.form,
            t:new Date().getTime(),
          };
          this.$axios
            .put("/api/shop/pickAddr",formData, {
              headers: {
                Authorization: localStorage.getItem("token"),
              },
            })
            .then((res) => {
              if (res.data.code === "00000") {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.dialogFormVisible = false;
                this.getList();
              }
            })
            .catch((err) => {
            });
        }
      });
    }
  },
}
</script>

<style scoped>
.beijing {
  background-color: #eee;
  padding: 20px;
}

.el-card__body {
  background-color: #fff;
  /* padding: 20px; */
}

.avue-crud {
  margin: 0 auto;
  width: 100%;
}

/* 输入框 */
::v-deep.el-form-item>label {
  font-weight: 400;
}

::v-deep.top .el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}

/* 俩按钮 */
.top .el-form-item {
  margin-left: 20px;
  margin-right: 80px;
}

/* 4按钮 */
.avue-crud__menu {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 40px;
  height: auto;
  overflow: hidden;
  margin-bottom: 5px;
  background-color: #fff;
}

/* 选中几个 */
.el-tag {
  background-color: rgba(2, 161, 233, .1);
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #02a1e9;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(2, 161, 233, .2);
  white-space: nowrap;
  margin-bottom: 10px;
}

.el-tag button {
  margin-left: 10px;
  color: #02a1e9;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  border: 0px;
}

.xaing {
  font-size: 16px;
  font-weight: 600;
}

/* 表格 */
.el-table {
  font-size: 12px;
}

/* 分页 */
.pagination {
  text-align: right;
  margin-top: 20px;
}
</style>